<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <el-page-header @back="goBack" content="商城公告" class="header"></el-page-header>
    <div class="body">
      <div class="content" v-for="(item,index) in datas" :key="index">
        <router-link :to="item.src" tag="div">
          <div class="content-item">{{ item.title }}<img src='@/assets/hot.png' width="27px"></div>
        </router-link>
      </div>
    </div>
    <div class="hello_world">
      <button class="top" @click="toTop">
        <img src="@/assets/backToTop.png" width="100%">
      </button>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'w_e_five',
  data () {
    return {
      datas: [
        { title: '华为智选双十一活动中奖名单公告', src: '/messages/index1' },
        { title: '全屋首销门店', src: '/messages/index2' },
        { title: '华为路由 BE3 Pro 1000M网口版晒单抽奖活动公告', src: '/messages/index3' },
        { title: '我的智慧生活频道下线公告', src: '/messages/index4' },
        { title: '整点赠礼活动', src: '/messages/index5' }
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toTop () {
      window.location.reload()
    }
  },
  mounted () {
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.content-item{
  width:100%;
  height: 60px;
  border-bottom: solid 1px gray;
  padding-top: 20px;
  margin-bottom: 3px;
}
.top{
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 100px;
  right: 5px;
  background-color: #fff;
  border: solid 1px gray;
  border-radius: 50%;
}
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.header{
  width: 100%;
  height:5%;
}
.body{
  width: 450px;
  height: 625px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: solid 1px gray
}
</style>
